<template>
  <div class="hello">
    <p style="height:40px;"></p>
    <p>
      <el-tooltip :content="$t('attorn_tips')" placement="top-start">
        <el-button class="a_button"  @click="dialogAttornVisible = true" >{{$t('attorn')}}</el-button>
      </el-tooltip>   
    </p>
    <p>
      <el-tooltip :content="$t('archive_tips')" placement="top-start">
        <el-button class="a_button"  @click="dialogArchiveVisible = true" >{{$t('archive')}}</el-button>
      </el-tooltip>   
    </p>

    <p>
      <el-tooltip :content="$t('delete_tips')" placement="top-start">
        <el-button class="a_button"  @click="dialogDeleteVisible = true" >{{$t('delete')}}</el-button>
      </el-tooltip>   
    </p>  

    <el-dialog :visible.sync="dialogAttornVisible" :modal="false"  width="300px" :close-on-click-modal="false">
      <el-form >
          <el-form-item label="" >
            <el-input  :placeholder="$t('attorn_username')" v-model="attornForm.username"></el-input>
          </el-form-item>
          <el-form-item label="" >
            <el-input type="password" :placeholder="$t('input_login_password')"  v-model="attornForm.password" ></el-input>
          </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAttornVisible = false">{{$t('cancel')}}</el-button>
        <el-button type="primary" @click="attorn" >{{$t('attorn')}}</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="dialogArchiveVisible" :modal="false"  width="300px" :close-on-click-modal="false">
      <el-form >
          <el-form-item label="" >
            <el-input type="password" :placeholder="$t('input_login_password')" v-model="archiveForm.password"></el-input>
          </el-form-item>
      </el-form>

      <p class="tips">
        {{$t('archive_tips2')}}

      </p>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogArchiveVisible = false">{{$t('cancel')}}</el-button>
        <el-button type="primary" @click="archive" >{{$t('archive')}}</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="dialogDeleteVisible" :modal="false"  width="300px" :close-on-click-modal="false">
      <el-form >
          <el-form-item label="" >
            <el-input type="password" :placeholder="$t('input_login_password')"  v-model="deleteForm.password">></el-input>
          </el-form-item>
      </el-form>

      <p class="tips">
        <el-tag type="danger">{{$t('delete_tips')}}</el-tag>  
          </p>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogDeleteVisible = false">{{$t('cancel')}}</el-button>
        <el-button type="primary" @click="deleteItem" >{{$t('delete')}}</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>


export default {
  name: 'Login',
  components : {

  },
  data () {
    return {
      dialogAttornVisible:false,
      dialogArchiveVisible:false,
      dialogDeleteVisible:false,
      attornForm:{
        username:'',
        password:''
      },
      archiveForm:{
        password:''
      },
      deleteForm:{
        password:''
      }
    }

  },
  methods: {

      deleteItem(){
        var that = this ;
        var url = DocConfig.server+'/api/item/delete';

        var params = new URLSearchParams();
        params.append('item_id',  that.$route.params.item_id);
        params.append('password',this.deleteForm.password );

        that.axios.post(url, params)
          .then(function (response) {
            if (response.data.error_code === 0 ) {
              that.dialogDeleteVisible = false;
              that.$message.success(that.$t("success_jump"));
              setTimeout(function(){
                that.$router.push({path:'/item/index'});
              },2000);
                
            }else{
              that.$alert(response.data.error_message);
            }
            
          })
          .catch(function (error) {
            console.log(error);
          });
      },
      archive() {
        var that = this ;
        var url = DocConfig.server+'/api/item/archive';

        var params = new URLSearchParams();
        params.append('item_id',  that.$route.params.item_id);
        params.append('password',this.archiveForm.password );

        that.axios.post(url, params)
          .then(function (response) {
            if (response.data.error_code === 0 ) {
              that.dialogArchiveVisible = false;
                that.$message.success(that.$t("success_jump"));
                setTimeout(function(){
                  that.$router.push({path:'/item/index'});
                },2000);
                
            }else{
              that.$alert(response.data.error_message);
            }
            
          })
          .catch(function (error) {
            console.log(error);
          });
      },

      attorn(){
        var that = this ;
        var url = DocConfig.server+'/api/item/attorn';

        var params = new URLSearchParams();
        params.append('item_id',  that.$route.params.item_id);
        params.append('username', this.attornForm.username);
        params.append('password',this.attornForm.password );

        that.axios.post(url, params)
          .then(function (response) {
            if (response.data.error_code === 0 ) {
              that.dialogAttornVisible = false;
                that.$message.success(that.$t("success_jump"));
                setTimeout(function(){
                  that.$router.push({path:'/item/index'});
                },2000);
                
            }else{
              that.$alert(response.data.error_message);
            }
            
          })
          .catch(function (error) {
            console.log(error);
          });
      }
  },

  mounted(){
   
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

.a_button{
  width: 30%;
}

.a_button:first-child{
  margin-top: 30px;
}
</style>
